import { useState } from "react"
import { useComponentStore } from "../../editor/stores/components"
import { ComponentSetter } from "../../editor/stores/component-config"
import { Segmented, Input, Select, InputNumber} from "antd"
import { ComponentAttr } from "./ComponentAttr"
import { ComponentEvent } from "./ComponentEvent"
import { ComponentStyle } from "./ComponentStyle"

export function Setting(){

    const { curComponentId } = useComponentStore()

    const [key, setKey] = useState("属性")

    if (!curComponentId) return null

    return (
        <div>
        <Segmented value={key} onChange={setKey} options={['属性', '样式', '事件']} block></Segmented>
        <div className="p-[20px]">
            {
                key === "属性" && <ComponentAttr />
            }
            {
                key === "样式" && <ComponentStyle />
            }
            {
                key === "事件" && <ComponentEvent />
            }
        </div>
        </div>
    )
}

export function renderFormElement(setter: ComponentSetter){
    const { type, options } = setter
    switch (type) {
        case "input":
            return <Input />
        case "inputNumber":
            return <InputNumber type="number" />
        case "select":
            return <Select options={options} />
    }
}